<template>
 
  <div class="message-container" ref="messageContainer">

    <MessageArea
      title="留言板"
      :subTitle="`(${data.total})`"
      :isListLoading="isLoading"
      :list="data.rows"
      @submit="handleSubmit"
      />
      <!-- //isLoading"决定里面的值要不要加载 -->
    <!-- //给内部绑定了一个事件触发handleSubmit -->
     <!-- 提交之后给到外面，然后直接添加到data里面 -->

  </div>
 
</template>

<script>
import MessageArea from "@/components/MessageArea";
import fetchData from "@/mixins/fetchData.js";
import * as msgApi from "@/api/message.js";
import mainScroll from "@/mixins/mainScroll.js";
export default {
  components: {
    MessageArea,
  },
  data() {
    return {
      page: 1,
      limit: 10,
    };
  },
  mixins: [fetchData({ total: 0, rows: [] }), mainScroll("messageContainer")],
  created() {
    this.$bus.$on("mainScroll", this.handleScroll);
    //主区域变化就要监视，传参是主区域的元素，方便调用的人知道现在的滚动条
  },
  destroyed() {
    this.$bus.$off("mainScroll", this.handleScroll);
  },
  computed: {
    hasMore() {
      //这个参数会返回一个boolean来判断是否还有更多
      return this.data.rows.length < this.data.total;
    },
  },
  methods: {
    async fetchData() {
      return msgApi.getMessages(this.page, this.limit);
    },
    handleScroll(dom) {//dom是这里的主体元素
      if (this.isLoading || !dom) {
        // 目前正在加载或者没有主体元素那么就不用调用加载函数了
        return;
      }
      const range = 100; // 顶一个可接受的范围，在这个范围内都算达到了底部
      const dec = Math.abs(dom.scrollTop + dom.clientHeight - dom.scrollHeight);
      //顶部加可视端减去滚动条如果小于100，就说明快到底了
      if (dec <= range) {
        this.fetchMore();
      }
    },
    // 加载下一页
    async fetchMore() {
      if (!this.hasMore) {
        // 没有更多啦
        return;
      }
      this.isLoading = true;
      //这个true会是组件里面变成多一个div加载状态
      this.page++;
      //记录当前的页数
      const resp = await this.fetchData();
      //需要加载更多的值，所以需要请求服务器来，巧妙通过原本的limit和page来获取相应的
      this.data.total = resp.total;
      //
      //这个api后端会把api的total发过来
      //前端通过记录这个t来判断是否加载完全部
      this.data.rows = this.data.rows.concat(resp.rows);
      //扩充数组长度
      this.isLoading = false;
      //加载页面结束
    },
    async handleSubmit(data, callback) {
      const resp = await msgApi.postMessage(data);
      callback("感谢您的留言");
      this.data.rows.unshift(resp);
    },
  },
};
</script>

<style scoped>
.message-container {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  padding: 25px 0;
  box-sizing: border-box;
  /* box-sizing: border-box; */
  scroll-behavior: smooth;
}
.message-area-container {
  /* overflow-y: auto; */
  width: 700px;
  margin: 0 auto;
}
</style>
